<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="assets/lib/css/bootstrap.min.css" media="screen"/>
    <style type="text/css">
        .small-img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<table border="1" width="800px">
    <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>真实姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>生日</th>
        <th>籍贯</th>
        <th>爱好</th>
        <th>创建时间</th>
        <th>头像</th>
        <th>操作</th>
    </tr>
    <%-- 使用 jstl 迭代用户信息列表 ${list} for(var : items) --%>
    <c:forEach var="userinfo" items="${list}" varStatus="statu">
        <tr>
            <%-- jstl 取值是调用对象的 get 方法 --%>
            <td>${statu.count}</td><%-- 下标 ${statu.index + 1} 从 0 开始的 --%>
            <td>${userinfo.username}</td>
            <td>${userinfo.name}</td>
            <td>${userinfo.gender}</td>
            <td>${userinfo.age}</td>
            <td><fmt:formatDate value="${userinfo.birthday}" pattern="yyyy年MM月dd日"/></td>
            <td>${userinfo.province}</td>
            <td>${userinfo.hobby}</td>
            <td>${userinfo.createDate}</td>
            <td><img src="${userinfo.imgUrl}" class="small-img"/></td>
            <td>
                <a>查看</a>
                <a href="useredit?id=${userinfo.id}" class="btn btn-default btn-sm">编辑</a>
                <a href="javascript:void(0)" class="delete" data-id="${userinfo.id}" data-name="${userinfo.username}">删除</a>
            </td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="11">
            <a href="${page.hasPrev ? 'userlist?num=' : 'javascript:void(0)'}${page.hasPrev? page.current - 1 :''}" class="btn btn-info btn-sm">上一页</a>
            <c:forEach begin="1" end="${page.last}" varStatus="st">
                <a href="userlist?num=${st.count}">${st.count}</a>
            </c:forEach>
            <a href="${page.hasNext ? 'userlist?num=' : 'javascript:void(0)'}${page.hasNext? page.current + 1 :''}" class="btn btn-info btn-sm">下一页</a>
        </td>
    </tr>
</table>
<script src="<%=request.getContextPath()%>/assets/lib/js/jquery.js"></script>
<script type="text/javascript">
    $(".delete").click(function(e){
        // 获取到 当前对象
        let that = $(this)[0];
        // 获取要删除的 id
        let id = that.dataset.id;
        // 获取要删除的 name
        let name = that.dataset.name;
        if(confirm("确认要删除用户 " + name + " 吗？")){
            // 删除
            console.log("删除");
            // // 创建请求对象
            // let req = new XMLHttpRequest();
            //
            // // 绑定事件
            // req.onreadystatechange = function(){
            //     if(req.readyState = 4 && req.status == 200){
            //         // 响应
            //         console.log(req.responseText);
            //         alert("删除成功");
            //     }
            // }
            // // open(提交方式, 提交地址, 是否异步)
            // req.open("get","delete?id="+id, true);
            // // 发送请求, send(String) get请求没有请求体所以使用 send();
            // req.send();

            $.ajax({
                async: true,  // 是否异步 true 表示异步
                type: "get",
                url:"delete",
                data:{ // 发送的数据
                    "id": id
                },
                dataType:"json",
                success: function(result, status, xhr){ // 请求成功回调
                    if(result.code == 1){
                        alert("删除成功");
                    }else{
                        alert("删除失败," + result.msg);
                    }
                    console.log(result);
                },
                error:function(xhr, status, error){ // 请求失败回调
                    console.log("删除失败");
                }
            });

            // $.get({
            //     async: true,  // 是否异步 true 表示异步
            //     url:"delete",
            //     data:{ // 发送的数据
            //         "id": id
            //     },
            //     success: function(result, status, xhr){ // 请求成功回调
            //         console.log(result);
            //     },
            //     error:function(xhr, status, error){ // 请求失败回调
            //         console.log("删除失败");
            //     }
            // });

            console.log("end");
        }else{
            // 不删除
            console.log("不删除");
        }

    })
</script>
</body>
</html>
